﻿<?php include $this->admin_tpl('meta');?>
<title>商品列表</title>
<script type="text/javascript" src="<?php echo STATIC_URL;?>plugin/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="page-container" style="padding-bottom:0;">
	<form id="search">
		<input type="hidden" value="" name="field">
		<input type="hidden" value="" name="order">
		<input type="hidden" value="0" name="download">
		<div class="c hidden-xs" style="display:inline-block"><input type="text" name="i_id" class="input-text" autocomplete="off" style="width:130px" placeholder="款式编码,*号开头模糊匹配" value=""></div>
		<div class="c"><input type="text" name="sku_id" class="input-text" autocomplete="off" style="width:130px" placeholder="商品编码,*号开头模糊匹配" value=""></div>
		<div class="c"><input type="text" name="name" class="input-text" autocomplete="off" style="width:130px" placeholder="商品名称" value=""></div>
		<div class="c hidden-xs"><input type="text" name="properties_value" class="input-text hidden-xs" autocomplete="off" style="width:130px" placeholder="颜色尺码" value=""></div>
		<div class="c hidden-xs"><input type="text" name="other_2" class="input-text" autocomplete="off" style="width:130px" placeholder="其他属性2" value=""></div>
		<?php include $this->admin_tpl('jst_common/select_brand2');?>
		<?php include $this->admin_tpl('jst_common/select_tag');?>
		<a class="btn btn-success radius" href="javascript:void(0)" id="btn_search"><i class="yzm-iconfont yzm-iconsousuo"></i> 搜索</a>
		<button class="btn btn-primary radius" id="btn_reset" type="reset"><i class="yzm-iconfont yzm-iconshuaxin"></i> 重置</button>
		<button name="dosubmit" class="btn btn-warning radius hidden-xs" type="button" id="btn_download" url="<?php echo U('wp_buhuo');?>"><i class="yzm-iconfont yzm-iconxiazai"> 导出</i></button>
	</form>
	
	<table id="table" class="mt-20" lay-filter="table" style="font-size:12px;"></table>
</div>
<script type="text/html" id="tool_temp">
	<a href="javascript:;" onmouseover="yzm_tips=layer.tips('设置商品标签，重新计算商品标签', this)" onmouseout="layer.close(yzm_tips);" class="btn btn-success radius btn_tag" action_url="<?php echo U('reget_sku')?>"><i class="yzm-iconfont yzm-icontags"></i> 商品标签及补货规则</a>
	<a href="javascript:;" class="btn btn-success radius" id="btn_touwei"><i class="yzm-iconfont yzm-icongengduo"></i> 头尾码配置</a>
	<a href="javascript:;" class="btn btn-primary radius" id='btn_guize'><i class="yzm-iconfont yzm-iconshuoming"></i> 查看补货规则</a>
</script>
<div id="guize_text" style="display:none;">
	<ul class="color:#000;line-height:24px;font-size:12px;">
		<li>1、<strong>按款补货：</strong>一个款式编码多个颜色视为多个款，比如款号A有3个颜色，系统当做3个款对待；</li>
		<li style="margin-top:8px;">2、<strong>补货天数：</strong>根据不同商品销量标签设置，不同的补货天数，<a href="javascript:" class="c-warning btn_tag2">点击“查看/设置规则</a>；</li>
		<li style="margin-top:8px;">3、<strong>补货依据：</strong>根据不同商品销量标签，采用不同的销量日均（四舍五入），<a href="javascript:" class="c-warning btn_tag2">点击“查看/设置规则</a>；</li>
		<li style="margin-top:8px;">4、<strong>小销量款：</strong>头尾码不补货，中码/均码默认每码补齐到3件，爆款、畅销款、平销款每码至少补齐到3件;</li>
		<li style="margin-top:8px;">5、<strong>补货数值小：</strong>计算结果需要补货1件，按不补货处理，计算结果需要补2件/3件按3件补货;</li>
		<li style="margin-top:8px;">6、<strong>滞销/零销款：</strong>不补货;</li>
		<li style="margin-top:8px;">7、<strong>其他数值：</strong>计算结果四舍五入后按5的整数倍补货，需要补货小于3件并且库存大于7件、库存大于20件并且补货数量小于5件,将不补货;</li>
		<li style="margin-top:8px;">8、<strong>断码：</strong>虚拟库存为0视为档口断码，将根据本码日均销量、上下码日均销量，比对作为日均<span class="c-red">（未实现该功能）</span></li>
		<li style="margin-top:8px;">9、<strong>标签更新：</strong>每天凌晨更新标签数据;</li>
	</ul>
</div>
<script type="text/html" id="vip_link2">
{{= d.i_id}} {{= d.color}}
</script>
<?php include $this->admin_tpl('jst_common/common_tpl');?>
<?php include $this->admin_tpl('footer');?>
<script type="text/javascript" src="<?php echo STATIC_URL;?>plugin/layui/layui.js"></script>
<script>
var db = 'jst_sku';
layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
	table = layui.treeTable; //表格
	util = layui.util; //工具集
	dropdown = layui.dropdown; //下拉菜单
	form = layui.form;
	//var index = layer.load(1);
	//执行一个 table 实例
	option = {
		elem: '#table',
		id:'table',
		height: 'full-80',
		limit:30,
		limits:[30,60,90],
		url:'<?php echo U('wp_buhuo');?>',
		method:'post',
		where: $('#search').serializeJson(),
		title: '商品列表',
		autoSort: false,
		tree:{
			view:{
				indent:5,
				showIcon:false,
				flexIconClose:'',
				flexIconOpen:'',
				//iconLeaf:'<i class="layui-icon layui-icon-subtraction"></i>',
				
			}
		},
		totalRow: true, // 开启合计行
		page: {theme:'#409eff',groups:3,hash:true}, //开启分页
		toolbar: '#tool_temp', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		cols: [[ //表头
			{field: 'id', title: 'ID', width:80,align:'center'},
			{field: 'pic', title: '图片', width:40,align:'center',templet: '#pic_tpl'},
			{field: 'i_id', title: '款式编码', width:150,align:'left',templet:'#vip_link2'},
			{field: 'name', title: '商品名称/其他属性2',align:'left'},
			{field: 'brand', title: '品牌',align:'center',width:120},
			{field: 'labels', title: '商品标签',align:'left',width:150,templet:function(row){
				html = '';
				if(row.labels_brand){
					labels_brand = row.labels_brand;
					labels_brand = labels_brand.replace('-', '').replace('+','');
					switch (labels_brand) {
						case '爆款':
							class_name = 'label-danger';
							break;
						case '畅销':
							class_name = 'label-warning';
							break;
						case '平销':
							class_name = 'label-secondary';
							break;
						case '小销量':
							class_name = 'label-primary';
							break;
						case '滞销':
							class_name = 'label-default';
							break;
						case '零销':
							class_name = 'label-default';
							break;
						default:
							class_name = 'label-default';
					}
					html += '<span class="label '+class_name+' radius">'+row.labels_brand+'</span>';
					if(row.labels){
						labels = row.labels.split(',');
						$.each(labels,function(index, value) {
							html +=' <span class="label label-success radius">'+value+'</span>';
						});
					}
					if(row.touwei){
						if($.inArray(row.touwei,['小码','大码'])!== -1){
							html +=' <span class="label label-warning radius">'+row.touwei+'</span>';
						}else{
							html +=' <span class="label label-success radius">'+row.touwei+'</span>';
						}
					}
				}
				return html;
			}},
			{field: 'category', title: '分类',align:'center',width:120},
			{field: 'brand', title: '品牌',align:'center',width:80},
			{field: 'enabled', title: '状态',align:'center',width:80,templet:function(row){
				if(row.enabled == 1){
					return '<span class="yzm-status-enable"><i class="yzm-iconfont">&#xe81f;</i>启用</span>';
				}else if(row.enabled == 0){
					return '<i class="yzm-iconfont">&#xe601;</i>备用';
				}else{
					return '<span class="yzm-status-disable"><i class="yzm-iconfont">&#xe601;</i>禁用</span>';
				}
			}},
			{field: 'd', title: '日均',align:'center',width:50,totalRow:true,totalRowDecimals:0},
			{field: 'purchase_qty', title: '加工中',align:'center',width:80,totalRow:true,totalRowDecimals:0},
			{field: 'qty', title: '库存',align:'center',width:50,totalRow:true,totalRowDecimals:0},
			{field: 'beihuo_qty', title: '备货仓',align:'center',width:50,totalRow:true,totalRowDecimals:0},
			{field: 'buhuo_qty', title: '建议补货',align:'center',width:80,totalRow:true,totalRowDecimals:0},
			{field: 'days_num', title: '补货天数',align:'center',width:80,totalRow:true,totalRowDecimals:0},
			{field: 'virtual_qty', title: '虚拟',align:'center',width:50,totalRow:true,totalRowDecimals:0},
			{field: '1days', title: '昨天',align:'center',width:50,sort:true,totalRow:true,totalRowDecimals:0},
			{field: '2days', title: '2天',align:'center',width:50,sort:true,totalRow:true,totalRowDecimals:0},
			{field: '3days', title: '3天',align:'center',width:50,sort:true,totalRow:true,totalRowDecimals:0},
			{field: '7days', title: '7天',align:'center',width:50,sort:true,totalRow:true,totalRowDecimals:0},
			{field: 'trend', title: '趋势', width:60,align:'center',templet: function(row){
					if(row.trend == 0){
						text = '持平';
						txt = '平';
						this_class = '';
					}else if(row.trend>0){
						this_class = 'label-danger';
						text = '上升'+row.trend+'%';
						txt = '升';
					}else{
						this_class = 'label-success';
						text = '下降'+row.trend+'%';
						txt = '降';
					}
					if(row.color === undefined){
						return  '<span onmouseover="yzm_tips=layer.tips(\''+text+'，点击查看详情\', this)" onmouseout="layer.close(yzm_tips);"><a href="javascript:;" class="other_2" other_2="'+row.i_id+'" title="查看统计"><span class="label radius '+this_class+'">'+txt+'</span></span></span>';
					}else{
						return  '<span onmouseover="yzm_tips=layer.tips(\''+text+'，点击查看详情\', this)" onmouseout="layer.close(yzm_tips);"><a href="javascript:;" class="other_2" other_2="'+row.i_id+row.color+'" title="查看统计"><span class="label radius '+this_class+'">'+txt+'</span></span></span>';
					}
				}
			}
		]],
		done:function(res,curr,count){
			var options = this;
			//layer.close(index);
			public_table(db);
			$('.other_2').on('click',function(){
				let width = '800px';
				if(screen.width<800){
					width = '100%';
				}
				let other_2 = $(this).attr('other_2');
				let url = '<?php echo U('jst_admin/trend',['type'=>'i_id'])?>'+'?kuan='+other_2;
				layer.open({  
					type: 2,  
					title: other_2+'销量统计',  
					shadeClose: true,  
					shade: 0.2,  
					area: [width, '600px'],  
					content: url,
					success: function(layero, index){
						
					}
				})
				return false;
			});
			$('#btn_guize').on('click',function(){
				layer.open({
				  title: '商品标签及补货规则',
				  content: $('#guize_text').html(),
				  area: ['600px', '500px'], 
				  success: function(layero, index){
					open_tag('.btn_tag2');
				  }
				})
			});
			$('#btn_touwei').click(function(){
				let url = '<?php echo U('wp_buhuo',['type'=>'touwei'])?>';
				layer.open({  
					type: 2,  
					title: '头尾码设置',  
					shadeClose: true,  
					shade: 0.2,  
					area: ['800px', '600px'],  
					content: url,
					success: function(layero, index){
					}
				}) 
			});
			open_tag('.btn_tag');
			// 监听节点点击事件
			table.on('row(table)', function(obj){
				// 当节点被点击时，自动展开该节点
				var data = obj.data; // 获取当前点击的节点数据
				var state = obj.state; // 获取当前节点的状态（开闭）
				// 如果节点是关闭的，则打开它
				// 调用 expandNode 方法来展开节点，该方法是 treeTable 模块提供的
				table.expandNode('table', {index:obj.index,expandFlag:state});
				$('div.layui-table-body table tbody ').find('tr[data-level="1"]').find('td').css({"background":"#f5fafe"});
				$('table').off('click', 'tr[data-level="1"] .other_2');
				$('table').on('click', 'tr[data-level="1"] .other_2', function() { 
					let width = '800px';
					if(screen.width<800){
						width = '100%';
					}
					let other_2 = $(this).attr('other_2');
					let url = '<?php echo U('jst_admin/trend',['type'=>'sku_id'])?>'+'?kuan='+other_2;
					layer.open({  
						type: 2,  
						title: other_2+'销量统计',  
						shadeClose: true,  
						shade: 0.2,  
						area: [width, '600px'],  
						content: url,
						success: function(layero, index){
							
						}
					})
					return false;
				})
			});
		}
	};
	table.render(option);
	table.hideCol('table', {
	  field: 'sku_code', // 对应表头的 field 属性值
	  hide: true // `true` or `false`
	});
	init_table(db);
})
function open_tag(obj){
	$(obj).click(function(){
		let url = '<?php echo U('wp_buhuo',['type'=>'tag'])?>';
		layer.open({  
	        type: 2,  
	        title: '商品标签及补货规则',  
	        shadeClose: true,  
	        shade: 0.2,  
	        area: ['800px', '600px'],  
	        content: url,
			success: function(layero, index){

			}
		}) 
	});
}
</script>
</body>
</html>